<template>
  <div class="gauge-content">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        align="center"
        v-for="item in columnList"
        :key="item.prop"
        :prop="item.prop"
      >
        <template slot="header" slot-scope="{ column, $index }">
          <div>{{ columnList[$index].label }}</div>
          <div>{{ columnList[$index].util }}</div>
        </template>
        <template slot-scope="{ row, column, $index }">
          <el-input
            v-model="row[column.property]"
            @change="columnChange(row, column, $index)"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { options } from "./options";
import { getPage, edit } from "@/api/cabin/fuelSounding";
export default {
  data() {
    return {
      tableData: [],
      columnList: options,
    };
  },
  methods: {
    onload() {
      getPage({ pageNum: 1, pageSize: 100, tankNum: 1 }).then(({ data }) => {
        this.tableData = data.list;
      });
    },
    columnChange(row) {
      edit(row).then(() => {
        this.$message.success("更新成功");
        this.onload();
      });
    },
  },
  created() {
    this.onload();
  },
};
</script>

<style scoped lang="scss">
.gauge-content {
  padding: 30px;
  &::v-deep .el-table__row {
    td {
      padding: 0;
      .cell {
        padding: 0;
        input {
          text-align: center;
        }
      }
    }
  }
}
</style>
